<template>
  <a-row class="low-battery">
    <a-col :span="18">
      <div class="car-info">
        <span class="car-no">
          {{ monitorInfo.no }}
        </span>
        <span class="car-addr">
          {{ monitorInfo.addr }}
        </span>
      </div>
      <div class="local">
        <span :class="['low-status', statusStyleMap[monitorInfo.status]]">{{
          statusMap[monitorInfo.status]
        }}</span>
        <span>
          <span class="iconfont icon-a-dianliang"></span>
          {{ monitorInfo.battery }}%
        </span>
        <span>
          <span class="iconfont icon-a-air"></span>
        </span>
        <span>
          <span class="iconfont icon-a-xuhang"></span>
          {{ monitorInfo.mile }}km
        </span>
        <span>
          <span class="iconfont icon-a-speed"></span>
          {{ monitorInfo.egineStatus === 1 ? monitorInfo.speed : "--" }}km/h
        </span>
        <span>
          <a-icon type="fire" />
          {{ monitorInfo.temp || "--" }}°C
        </span>
      </div>
    </a-col>
    <a-col :span="5" offset="1">
      <div class="person-info">
        <div>
          <a-avatar
            size="large"
            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
          />
        </div>
        <div>
          <div class="driver-name">
            {{ monitorInfo.name }}
          </div>
          <div>
            {{ monitorInfo.tel }}
          </div>
        </div>
      </div>
    </a-col>
  </a-row>
</template>

<script>
import { LOW_BATTERY_DIRVE_STATUS } from "@/config/const";

export default {
  data() {
    return {
      statusMap: LOW_BATTERY_DIRVE_STATUS,
      statusStyleMap: {
        1: "waring-status",
        2: "free-status",
        3: "stop-status"
      }
    };
  },
  computed: {
    coldImg() {
      return this.monitorInfo.coldStatus
        ? require("@/assets/img/cold.png")
        : require("@/assets/img/hot.png");
    }
  },
  components: {},
  name: "CarMonitorInfo",
  props: {
    title: String,
    loading: Boolean,
    type: String,
    monitorInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  }
};
</script>

<style scoped lang="less">
.low-battery {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #efefef;
  margin-bottom: 20px;

  .car-img {
    width: 40px;
    height: 40px;
  }

  .cold-img {
    width: 18px;
    height: 18px;
  }

  .car-no {
    margin-right: 10px;
    color: #181b39;
    font-size: 0.16rem;
    font-weight: 500;
  }

  .car-addr {
    font-size: 0.14rem;
    font-weight: 400;
    color: #646a71;
  }

  .person-info {
    display: flex;
    justify-content: space-between;
  }

  .local {
    margin-top: 10px;

    span:not(:nth-child(1)) {
      margin-right: 20px;
    }

    .icon-a-air {
      color: #3370ff;
    }

    .icon-a-dianliang {
      vertical-align: middle;
      color: #fca70d;
    }
  }

  .low-status {
    margin-right: 50px;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.12rem;
    color: #fff;
  }

  .waring-status {
    background: #ff5a5a;
  }

  .free-status {
    background: #31d495;
  }

  .stop-status {
    background: #bbb;
  }

  .driver-name {
    color: #181b39;
    font-size: 0.14rem;
  }
}
</style>
